<template>
  <div class="product-describe relative mb-2 w-[calc(100%-2rem)] mx-auto">
    <van-collapse v-model="activeNames">
      <van-collapse-item v-for="section in sections" :key="section.name" :title="section.title" :name="section.name">
        <template #title>
          <div class="flex items-center h-full w-full">
            <span class="text-[15px]">{{ section.title }}</span>
            <!-- <van-icon name="arrow-down" class="collapse-icon" /> -->
          </div>
        </template>
        <div class="p-2 pl-6 bg-white rounded-lg flex  items-center">
          <div class="text-sm text-gray-500">{{ section.value }}</div>
          <!-- 列表类型 -->
          <!-- <ul class="list-disc list-inside space-y-1">
            <li v-for="item in section.items" :key="item" class="text-sm">{{ item }}</li>
          </ul> -->
        </div>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script>
import { Collapse, CollapseItem } from "vant"
import { mapGetters } from "vuex"
export default {
  name: "ProductDescribe",
  components: {
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem,
  },
  props: {
    detailInfo: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    ...mapGetters({
      isZh: "lang/isZh",
    }),
  },
  data() {
    return {
      activeNames: ["覆盖区域", "产品简介"],
      // sections: [
      //   {
      //     name: "覆盖区域",
      //     title: this.$t("products.detail.coverRegion"),
      //     value: "马来西亚",
      //   },
      //   {
      //     name: "产品简介",
      //     title: this.$t("products.detail.productIntro"),
      //     value: "马来西亚",
      //   },
      //   {
      //     name: "运营商",
      //     title: this.$t("products.detail.operator"),
      //     value: "中国运营商为ChinaMobile；香港运营商为CSL",
      //   },
      //   {
      //     name: "发货时间",
      //     title: this.$t("products.detail.delivery"),
      //     value: "eSIM 订单付款后 1分钟内自动发货至邮箱",
      //   },
      //   {
      //     name: "注意事项",
      //     title: this.$t("products.detail.notice"),
      //     value: "激活后按照马来西亚时间计算（~23:59pm为1天）,仅网络，无号码,不支持Tiktok、Chatgpt,下单后90天内激活（过期无效）",
      //   },
      //   {
      //     name: "激活方式",
      //     title: this.$t("products.detail.activation"),
      //     value: "激活方式：",
      //   },
      //   {
      //     name: "支持设备",
      //     title: this.$t("products.detail.supportDevice"),
      //     value: "支持设备：",
      //   },
      //   {
      //     name: "产品FAQ",
      //     title: this.$t("products.detail.productFAQ"),
      //     value: "产品FAQ：",
      //   },
      //   {
      //     name: "Yoyo币",
      //     title: this.$t("products.detail.yoyoCoin"),
      //     value: "Yoyo币：",
      //   },
      // ],
    }
  },
  computed: {
    sections() {
      console.log("this.detailInfo :>> ", this.detailInfo)
      const sections = [
          {
          name: "覆盖区域",
          title: this.$t("products.detail.coverRegion"),
          value: this.isZh ? this.detailInfo.area : this.detailInfo.areaEn,
        },
        {
          name: "产品简介",
          title: this.$t("products.detail.productIntro"),
          value: this.isZh ? this.detailInfo.remark : this.detailInfo.remarkEn,
        },
        {
          name: "运营商",
          title: this.$t("products.detail.operator"),
          value: this.isZh ? this.detailInfo.operator : this.detailInfo.operatorEn,
        },
        {
          name: "发货时间",
          title: this.$t("products.detail.delivery"),
          value: this.isZh ? this.detailInfo.deliveryTime : this.detailInfo.deliveryTimeEn,
        },
        {
          name: "注意事项",
          title: this.$t("products.detail.notice"),
          value: this.isZh ? this.detailInfo.precautions : this.detailInfo.precautionsEn,
        },
        {
          name: "激活方式",
          title: this.$t("products.detail.activation"),
          value: this.isZh ? this.detailInfo.activationMethod : this.detailInfo.activationMethodEn,
        },
        {
          name: "支持设备",
          title: this.$t("products.detail.supportDevice"),
          value: this.isZh ? this.detailInfo.supportedDevices : this.detailInfo.supportedDevicesEn,
        },
        {
          name: "产品FAQ",
          title: this.$t("products.detail.productFAQ"),
          value: this.isZh ? this.detailInfo.productFaq : this.detailInfo.productFaqEn,
        },
        {
          name: "Yoyo币",
          title: this.$t("products.detail.yoyoCoin"),
          value: this.isZh ? this.detailInfo.yoyoCoin : this.detailInfo.yoyoCoinEn,
        },
      ]
      return sections
    },
  },
}
</script>

<style scoped>
.product-describe {
}

/deep/ .van-cell {
  line-height: 1em !important;
}

::v-deep .van-collapse-item__content {
  padding: 0;
  background-color: transparent;
}

::v-deep .van-collapse-item__wrapper {
  border: none;
}

::v-deep .van-collapse-item {
  border: none;
}

.collapse-icon {
  transition: transform 0.3s ease;
}

::v-deep .van-collapse-item--expanded .collapse-icon {
  transform: rotate(180deg);
}
</style>
